<template>
	<view class="content">
		<!--banner-->
		<div class="banner">
			<swiper class="swiper" indicator-dots>
			    <swiper-item>
			        <view class="swiper-item uni-bg-red">
						<image src="../../static/image/banner.jpg" mode=""></image>
					</view>
			    </swiper-item>
				<swiper-item>
				    <view class="swiper-item uni-bg-red">
						<image src="../../static/image/banner1_1.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</div>
		<!--nav-->
		<nav>
			<ul>
				<li @click="clickNav('待录入数据')">
					<div class="title">
						<p>待录入数据（{{num}}）</p>
						<p><br></p>
					</div>
					<div class="img">
						
					</div>
				</li>
				<li @click="clickNav('环保数据')">
					<div class="title">
						<p>环保数据</p>
						<p><br></p>
					</div>
					<div class="img">
						
					</div>
				</li>
				<li @click="clickNav('安检数据')">
					<div class="title">
						<p>安检数据</p>
						<p><br></p>
					</div>
					<div class="img">
						
					</div>
				</li>
				<li @click="clickNav('外检录入')">
					<div class="title">
						<p>外检录入</p>
						<p><br></p>
					</div>
					<div class="img">
						
					</div>
				</li>
				<li @click="clickNav('核发年检录入')">
					<div class="title">
						<p>核发年检录入</p>
						<p><br></p>
					</div>
					<div class="img">
						
					</div>
				</li>
				<li @click="clickNav('暂未开放')">
					<div class="title">
						<p>车辆类型</p>
						<p></p>
					</div>
					<div class="img">
						
					</div>
				</li>
			</ul>
		</nav>
		<!--ico_nav-->
		<div class="nav_title">
			<span></span>
			<span></span>
			<h3>智能助手</h3>
		</div>
		<u-toast ref="uToast" />
	</view>
</template>

<script> 
	var innerAudioContext = uni.createInnerAudioContext();  
	innerAudioContext.autoplay = true;
	export default {
		data() {
			return {
				userInfo:[],
				num:0,
				timer:null,
				new_order:'../../static/new_order.mp3'
			}
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('userStatus');
			    if (!value) {
			        uni.redirectTo({
			            url: "/pages/my/login"
			        });
			    }else{
					this.userInfo = value
					
				}
			} catch (e) {
			    // error
				console.log('错误',e)
			}
			/* this.timer = setInterval(()=>{
				this.getDataNum()
			},30000) */
			this.getDataNum()
			uni.onSocketMessage( (res)=> {
				console.log('收到服务器内容：',res);
				this.getDataNum()
				if(res.data == 2){
					//收到新的订单播放语音
					this.playVoice()
				}
			});
		},
		onHide(){
			console.log('页面隐藏了')
			clearInterval(this.timer)
		},
		onUnload(){
			/* uni.closeSocket();
			uni.onSocketClose(function (res) {
			  console.log('WebSocket 已关闭！');
			}); */
		},
		onLoad(option) {
			
			
		},
		methods: {
			clickNav(e){
				console.log(e)
				if(e === '待录入数据'){
					uni.navigateTo({
					    url: "/pages/order/index?title=待录入数据&id="
					});
				}
				if(e === '环保数据'){
					uni.navigateTo({
					    url: "/pages/order/index?title=环保数据&id="
					});
				}
				if(e === '安检数据'){
					uni.navigateTo({
					    url: "/pages/order/index?title=安检数据&id="
					});
				}
				if(e === '车辆类型'){
					uni.navigateTo({
					    url: "/pages/car/carType?title=车辆类型"
					});
				}
				if(e === '外检录入'){
					uni.navigateTo({
					    url: "/pages/order/list?title=外检录入"
					});
				}
				if(e === '核发年检录入'){
					uni.navigateTo({
					    url: "/pages/order/list?title=核发年检录入"
					});
				}
				if(e === '暂未开放'){
					this.$refs.uToast.show({
						title: '该功能暂未开放',
						type: 'error'
					})
				}
			},
			getDataNum(){
				uni.request({
				    url: this.$api.statisticsPendingEntry, 
				    data: {},
				    success: (res) => {
				        console.log('获取待录入数据数量',res.data);
						if(res.data.data){
							this.num = res.data.data
							
						}else{
							this.num = 0
						}
				    },fail: (err) => {
				    	this.num = 0
						this.$refs.uToast.show({
							title: '与服务器连接失败，请检查网络状况',
							type: 'error'
						})
				    }
				});
			},
			playVoice() {
			    console.log('准备播放录音');  
			    if (this.new_order) {  
					console.log('正在播放')
			        innerAudioContext.src = this.new_order;  
			        innerAudioContext.play();  
			    }  
			}  
		}
	}
</script>

<style lang="less">
	.content {
		.banner{
			width: 100%;
			image{
				width: 100%;
			}
		}
		nav{
			padding: 40rpx 20rpx;
			ul{
				width: 92%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				li{
					font-size: 32rpx;
					background-color: #4ba750;
					width: 48%;
					border-radius: 6rpx;
					padding: 20rpx;
					color: #fff;
					margin-bottom: 20rpx;
					.img{
						text-align: right;
						image{
							width: 60rpx;
							height: 60rpx;
							
						}
					}
					p{
						line-height: 48rpx;
					}
				}
				li:nth-child(2){
					background-color: #2f7cc2;
				}
				li:nth-child(3){
					background-color: #f18918;
				}
				li:nth-child(4){
					background-color: #863790;
				}
			}
		}
		.nav_title{
			display: flex;
			background-color: #dddddd;
			padding: 30rpx 20rpx;
			span{
				width: 20rpx;
				height: 40rpx;
				background-color: #40b984;
				display: block;
			}
			span:nth-child(2){
				background-color: #fff;
				margin-left: 10rpx;
			}
			h3{
				line-height: 40rpx;
				margin-left: 20rpx;
				font-size: 36rpx;
			}
		}
		
	}
</style>
